import React from 'react';
import PropTypes from 'prop-types';
import SalaryRefTable from '@/components/SalaryRefTable';
import { Form, Input, Select, Tooltip, Row, Col, Icon } from 'antd';
import { hideSalaryTable } from '@/utils/utils';
import salary from './SalaryAdjust';
import { useSalaryincrecords } from './utils';

const { Item } = Form;
const { Option } = Select;
const { TextArea } = Input;

// 调岗后直属上级确认申请
const AfterSuperior = ({ form, type, detail, hasOwnApply, current }) => {
    const { getFieldDecorator } = form;
    const { salaryAdjTypeNextSuperior, salaryAdjPerNextSuperior, employeeId } = detail;
    const {
        records: { incPer }
    } = useSalaryincrecords(employeeId);
    const getAdjustLabel = () => {
        const adjustType = salary.types.find(item => item.value === salaryAdjTypeNextSuperior);
        if (!adjustType) return '';
        if (adjustType.value === '0') return `${adjustType.name}`;
        return `${adjustType.name} ${salaryAdjPerNextSuperior ? `${salaryAdjPerNextSuperior}%` : ''}`;
    };
    const isConsistent = form.getFieldValue('salaryAdjTypeNextSuperior') === '0';
    return (
        <div>
            <Item
                required={type !== 'detail'}
                style={type !== 'detail' ? { marginBottom: 0 } : {}}
                label={
                    <span>
                        薪资建议&nbsp;
                        <Tooltip title="调岗后直属上级薪资调整建议">
                            <Icon type="question-circle-o" />
                        </Tooltip>
                    </span>
                }
            >
                {type !== 'detail' ? (
                    <Row gutter={8}>
                        <Col span={12}>
                            <Item>
                                {getFieldDecorator('salaryAdjTypeNextSuperior', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请选择薪资变化类型！'
                                        }
                                    ]
                                })(
                                    <Select
                                        onChange={() => {
                                            form.setFields({
                                                salaryAdjPerNextSuperior: {
                                                    value: undefined
                                                }
                                            });
                                        }}
                                        placeholder="请选择"
                                    >
                                        {salary.types.map(item => (
                                            <Option
                                                disabled={item.value === '1' && incPer === 50}
                                                key={item.value}
                                                value={item.value}
                                            >
                                                {item.name}
                                            </Option>
                                        ))}
                                    </Select>
                                )}
                            </Item>
                        </Col>
                        <Col span={12}>
                            <Item>
                                {getFieldDecorator('salaryAdjPerNextSuperior', {
                                    rules: [
                                        {
                                            validator(_, value, callback) {
                                                if (form.getFieldValue('salaryAdjTypeNextSuperior') !== '0') {
                                                    if (
                                                        !value ||
                                                        value > 50 ||
                                                        value < 1 ||
                                                        !/^[0-9]+([.]{1}[0-9]+){0,1}$/.test(value)
                                                    ) {
                                                        return callback('输入1-50任意数');
                                                    }
                                                    return callback();
                                                }
                                                return callback();
                                            }
                                        }
                                    ]
                                })(
                                    // <Select
                                    //     disabled={form.getFieldValue('salaryAdjTypeNextSuperior') === '0'}
                                    //     placeholder={form.getFieldValue('salaryAdjTypeNextSuperior') !== '0' && '请选择'}
                                    // >
                                    //     {salary.getValues(
                                    //         form.getFieldValue('salaryAdjTypeNextSuperior') === '1' ?
                                    //             incPer : 0
                                    //     ).map(item => (
                                    //         <Option key={item} value={item}>{item}%</Option>
                                    //     ))}
                                    // </Select>
                                    <Input
                                        suffix={isConsistent ? '' : '%'}
                                        disabled={isConsistent}
                                        placeholder={
                                            form.getFieldValue('salaryAdjTypeNextSuperior') !== '0' && '输入1-50任意数'
                                        }
                                    ></Input>
                                )}
                            </Item>
                        </Col>
                    </Row>
                ) : (
                    `${getAdjustLabel()}`
                )}
                {/* {type === 'detail' && getFieldDecorator('salaryAdjTypeNextSuperior', {
                    initialValue: detail.salaryAdjTypeNextSuperior
                })(
                    <Select style={{ display: 'none' }} placeholder="请选择">
                        {salary.types.map(item => (
                            <Option key={item.value} value={item.value}>{item.name}</Option>
                        ))}
                    </Select>
                )}
                {type === 'detail' && getFieldDecorator('salaryAdjPerNextSuperior', {
                    initialValue: detail.salaryAdjPerNextSuperior
                })(
                    <Select
                        style={{ display: 'none' }}
                    >
                        {salary.getValues(0).map(item => (
                            <Option key={item} value={item}>{item}%</Option>
                        ))}
                    </Select>
                )} */}
            </Item>
            {!hideSalaryTable && ((hasOwnApply && current === 2) || (!hasOwnApply && current === 1)) && (
                <Form.Item label="薪资参考" wrapperCol={{ md: { span: 20 }, sm: { span: 20 } }}>
                    <SalaryRefTable postId={detail.afterPostId} companyId={detail.companyId} />
                </Form.Item>
            )}
            <Item label="意见或建议" help={type !== 'detail' ? '0-200个字符' : ''}>
                {type !== 'detail' &&
                    getFieldDecorator('suggestionNextSuperior', {
                        rules: [
                            {
                                max: 200,
                                message: '0-200个字符'
                            }
                        ]
                    })(<TextArea placeholder="请输入意见或建议" rows={5} />)}
                {type === 'detail' && detail.suggestionNextSuperior}
            </Item>
        </div>
    );
};

AfterSuperior.propTypes = {
    type: PropTypes.oneOf(['edit', 'detail']).isRequired
};

export default AfterSuperior;
